<script setup lang="ts">
import { computed } from 'vue'
import { useThemeVars } from 'naive-ui'

const themeVars = useThemeVars()

const props = defineProps({
  workload: {
    type: Number,
    required: true,
    default: 0,
  },
})

// 1. 更新计算属性以匹配四种状态
const statusClass = computed(() => {
  const load = props.workload
  if (load === 0) {
    return 'status-good' // 空闲 -> 绿色
  }
  if (load > 0 && load < 30) {
    return 'status-light' // 轻度 -> 蓝色
  }
  if (load >= 30 && load < 150) {
    return 'status-intensive' // 密集 -> 橙色
  }
  // load >= 70
  return 'status-danger' // 超重 -> 红色
})
</script>

<template>
  <div class="container">
    <div class="workload-button" :class="statusClass">
      <span class="workload-label">{{ workload }}</span>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var('themeVars.value.CardColor');
}

.workload-button {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', 'Roboto', sans-serif;

  --button-color: #333;
  --glow-color: #4ade80;

  background-color: var(--button-color);

  /* 2. 应用按钮专属的动画 */
  animation: pulsate-button 2.5s infinite ease-in-out;

  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}

.workload-label {
  color: white;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

  /* 2. 应用数字标签专属的、更夸张的动画 */
  animation: pulsate-label 2.5s infinite ease-in-out;
}

/* --- 1. 定义四种状态的颜色 --- */

/* 状态: 空闲 (绿色) */
.workload-button.status-good {
  --button-color: #1d8144;
  --glow-color: #4ade80;
}

/* 状态: 轻度 (蓝色) - 新增 */
.workload-button.status-light {
  --button-color: #3760e9;
  /* 深蓝色 */
  --glow-color: #60a5fa;
  /* 亮蓝色 */
}

/* 状态: 密集 (橙色) */
.workload-button.status-intensive {
  --button-color: #b45309;
  --glow-color: #fbbd23;
}

/* 状态: 超重 (红色) */
.workload-button.status-danger {
  --button-color: #991b1b;
  --glow-color: #f87171;
}

/* --- 2. 定义两个独立的动画 --- */

/* 动画1: 应用于按钮本身 (辉光 + 轻微缩放) */
@keyframes pulsate-button {
  0%,
  100% {
    transform: scale(0.98);
    box-shadow:
      0 0 15px var(--glow-color),
      0 0 30px var(--glow-color);
  }

  50% {
    transform: scale(1);
    box-shadow:
      0 0 30px var(--glow-color),
      0 0 60px var(--glow-color);
  }
}

/* 动画2: 应用于数字标签 (更明显的缩放) */
@keyframes pulsate-label {
  0%,
  100% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.8);
    /* 放大到115%，效果更醒目 */
  }
}
</style>
